export const addVideoPlayerComponent = (editor) => {
    const { Components } = editor;

    // 视频播放组件
    Components.addType('videoPlayer', {
        model: {
            defaults: {
                tagName: 'video',
                attributes: {
                    controls: true,
                    src: 'https://www.i3vsoft.com/mp4/banner3.mp4',
                    class: 'video-player',
                    'data-gjs-type':"videoPlayer",
                },
                resizable: true, // 允许调整大小
                droppable: false, // 不允许其他模块拖入
                traits: [
                    {
                        type: 'text',
                        name: 'src',
                        label: '视频路径',
                    },
                    {
                        type: 'button',
                        text: '上传视频',
                        full: true,
                        command:'setVideoUploadCommands'
                    }
                ],
                styles: `
                    .video-player {
                        display: block;
                        width: 100%; /* 宽度撑满父容器 */
                        height: auto; /* 高度自适应 */
                        border: 2px solid #ddd;
                        border-radius: 8px;
                    }
                `,
            },
        },
    });

    // 注册视频播放组件到组件面板中
    editor.BlockManager.add('video-player-block', {
        label: '视频播放',
        media: `<svg viewBox="0 0 24 24" style="width:30px; height:30px">
        <path fill="currentColor" d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" />
      </svg>`,
        category: 'Basic',
        content: {
            type: 'videoPlayer',
        },
    });

    // 在 block:drag:stop 事件中绑定 URL 修改逻辑
    // editor.on('block:drag:stop', (model) => {
    //     if (model.get('type') === 'videoPlayer') {
    //         // 弹出窗口让用户输入视频 URL
    //         const videoUrl = prompt('请输入视频 URL:');
    //         if (videoUrl) {
    //             const videoEl = model.view.el.querySelector('.video-player');
    //             if (videoEl) {
    //                 videoEl.src = videoUrl;
    //             }
    //         }
    //     }
    // });
};
